<template>
  <view class="basic-info" v-if="submitState">
    <text class="tit rbox">填写您的信息</text>
    <van-cell-group>
      <van-field
        :value="value"
        label="庄园信息"
        placeholder="输入您的庄园地址及名称"
        border="true"
        autosize
        type="textarea"
      />
      <van-field
        :value="value"
        label="园区信息"
        placeholder="请输入庄园面积"
        border="true"
      />
      <view class="line rbox box_space_b">
        <text class="name">发生过的病害</text>
        <picker
          mode="selector"
          :range="array"
          :value="arrIdx"
          class="picker-wrap"
          @change="listenerPickerSelected"
        >
          <text>{{ array[arrIdx] }}</text>
        </picker>
      </view>
      <view class="line rbox box_space_b">
        <text class="name">葡萄品种</text>
        <text class="picker-wrap" @tap="show = true">{{
          info || "请选择(此处可多选)"
        }}</text>
      </view>
      <multiple-select
        v-model="show"
        :data="list"
        :default-selected="defaultSelected"
        @confirm="confirm"
      ></multiple-select>
      <van-field
        :value="value"
        label="用药次数"
        placeholder="填写用药次数"
        border="true"
      />
      <van-field
        :value="value"
        label="手机号码"
        placeholder="填写您的手机号码"
        border="true"
      />
    </van-cell-group>

    <view class="btn btn-normal rbox box_center btn-position" @tap="submitInfo"
      >提交订阅</view
    >
  </view>

  <view class="basic-info success" v-else>
    <view class="user-tip cbox box_y_center">
      <view class="iconfont icon-ok rbox box_center"></view>
      <text class="msg">成功订阅，请耐心等候信息</text>
      <text class="tip">信息上报完成可查看结果</text>
    </view>
    <text class="phone-num">客服号码：010-123456</text>
  </view>
</template>
<script>
import multipleSelect from "../../components/multiple-select/multiple-select"
import { vanField } from "../../wxcomponents/vant/field/index.js"
export default {
  data() {
    return {
      value: '',
      array: ['点击选择', '病害一', '病害二', '病害三', '病害四'],
      arrIdx: 0,
      show: false, //是否显示 - 双向绑定
      info: "",
      list: [], //数据源
      defaultSelected: ["3", "5"], //默认选中项
      submitState: true
    }
  },
  components: {
    vanField,
    multipleSelect
  },
  methods: {
    submitInfo() {
      this.submitState = !this.submitState
    },
    listenerPickerSelected: function (e) {
      this.arrIdx = e.detail.value
    },
    confirm(data) {
      console.log(data);
      this.info = data.map(el => el.label).join(",");
    }
  },
  onShow() {
    //模拟异步数据
    setTimeout(() => {
      this.list = [
        {
          label: "白葡萄",
          value: "1"
        },
        {
          label: "红葡萄",
          value: "2",
          disabled: true //禁用
        },
        {
          label: "新疆葡萄",
          value: "3"
        },
        {
          label: "进口葡萄",
          value: "4"
        },
        {
          label: "有机葡萄",
          value: "5"
        }
      ];
    }, 1000);
  },
}
</script>

<style lang="scss" scoped>
.basic-info {
  .tit {
    padding: 0 42rpx;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    font-size: 40rpx;
    line-height: 1;
    color: #333;
  }
  .line {
    position: relative;
    padding: 20rpx 30rpx;
    &::after {
      position: absolute;
      box-sizing: border-box;
      -webkit-transform-origin: center;
      transform-origin: center;
      content: " ";
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .name {
      color: #646566;
    }
    .picker-wrap {
      color: #646566;
      width: 60%;
      text-align: center;
    }
  }
  .btn-position {
    margin: 420rpx auto 0;
  }
  .btn {
    width: 450rpx;
    height: 84rpx;
    font-size: 34rpx;
    line-height: 1;
    box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 42rpx;
    &.btn-normal {
      background: #1de1c3;
      color: #fff;
    }
  }
  &.success {
    position: relative;
    height: 100vh;
    .user-tip {
      .iconfont {
        margin-top: 182rpx;
        width: 170rpx;
        height: 170rpx;
        font-size: 80rpx;
        font-weight: 800;
        color: #fff;
        background-color: #1de1c3;
        border-radius: 50%;
      }
      .msg {
        margin-top: 38rpx;
        font-size: 36rpx;
        line-height: 1;
        color: #1de1c3;
      }
      .tip {
        margin-top: 18rpx;
        font-size: 24rpx;
        line-height: 1;
        color: #6d6d6d;
      }
    }
    .phone-num {
      position: absolute;
      bottom: 228rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      line-height: 1;
      color: #6d6d6d;
    }
  }
  /deep/ .van-field__input--textarea {
    text-align: center;
  }
  /deep/ .van-field__input {
    text-align: center !important;
  }
}
</style>
